<!--
 * @Description: 取餐页面
 * @Author: Kerwin
 * @Date: 2025-05-12 14:46:32
 * @LastEditTime: 2025-11-12 17:32:33
 * @LastEditors:  Please set LastEditors
-->

<template>
  <view class="pickUp" v-if="pageStatus === 'success'">
    <!-- 取餐号 -->
    <view class="pickUpNumber card" style="margin-top: 0">
      <!-- 刷新end -->
      <view
        v-if="hwInfo.orderStatus == 'WAIT_OUT_MEAL'"
        class="NumberWord title"
      >
        <text></text>
        <text style="font-size: 42rpx">等待接单...</text>
        <text @click="onClickRight">
          <van-icon style="color: #2e2e2e" size="18" name="replay"
        /></text>
      </view>
      <!-- OUT_MEAL' || hwInfo.orderStatus == 'OUT_MEAL_PART -->
      <view
        v-else-if="
          hwInfo.orderStatus == 'OUT_MEAL' ||
          hwInfo.orderStatus == 'OUT_MEAL_PART'
        "
        class="NumberWord"
      >
        <view style="font-weight: 700"
          >{{ hwInfo.shopRestaurant.shopBrandName }}-取餐号</view
        >
        <view class="Number">
          <view v-if="ticketCodes.length > 0" class="NumberText">{{
            codeName()[currentQrIndex]
          }}</view>
          <template v-else>
            <view
              class="NumberText"
              v-for="(item, index) in codeName()"
              :key="index"
              >{{ item }}</view
            >
          </template>
        </view>
        <!-- 取餐二维码 -->
        <view v-if="ticketCodes.length > 0" class="qrcode">
          <!-- 取票码轮播图 -->
          <view class="qrcode-swiper-container">
            <van-button
              :disabled="currentQrIndex === 0"
              size="small"
              @click="prevQr"
              round
              icon="arrow-left"
            >
            </van-button>
            <swiper
              :current="currentQrIndex"
              @change="onQrSwiperChange"
              style="height: 500rpx; width: 500rpx"
              :indicator-dots="false"
              :autoplay="false"
              :circular="false"
            >
              <swiper-item v-for="(qr, index) in ticketCodes" :key="index">
                <view class="qrcode-item">
                  <qrcode
                    :cid="'qrcode-' + index"
                    makeOnLoad
                    :text="qr"
                    :size="200"
                  ></qrcode>
                  <view class="qrcode-label"
                    >取餐码 {{ index + 1 }}/{{ ticketCodes.length }}</view
                  >
                </view>
              </swiper-item>
            </swiper>

            <van-button
              :disabled="currentQrIndex === ticketCodes.length - 1"
              size="small"
              @click="nextQr"
              round
              icon="arrow"
            >
            </van-button>
          </view>
        </view>
        <!-- <view><text>前方还有5单，</text><text>还需等待时间：10.20分钟</text></view> -->
      </view>
      <view v-else-if="hwInfo.orderStatus == 'FAIL'" class="NumberWord title">
        <text></text>
        <text style="font-size: 42rpx" v-if="orderInfo.status == 92"
          >已退款</text
        >
        <text style="font-size: 42rpx" v-else>出餐失败</text>
        <text @click="onClickRight">
          <van-icon style="color: #2e2e2e" size="18" name="replay"
        /></text>
      </view>
      <view
        v-else-if="hwInfo.orderStatus == 'CREATE_ORDER'"
        class="NumberWord title"
      >
        <text></text>
        <text style="font-size: 42rpx">等待付款...</text>
        <text @click="onClickRight">
          <van-icon style="color: #2e2e2e" size="18" name="replay"
        /></text>
      </view>
      <view v-else class="NumberWord title">
        <text></text>
        <text style="font-size: 42rpx">加载中...</text>
        <text @click="onClickRight">
          <van-icon style="color: #2e2e2e" size="18" name="replay"
        /></text>
      </view>
      <view>
        <van-steps
          :active="active"
          finish-icon="success"
          :active-icon="activeIcon"
          :active-color="hwInfo.orderStatus == 'FAIL' ? '#f4403b' : '#7aa2fb'"
        >
          <van-step
            >{{ hwInfo.orderStatus == 'CREATE_ORDER' ? '待下单' : '已下单' }}
          </van-step>
          <van-step>{{
            hwInfo.orderStatus == 'FAIL' ? '出餐失败' : '商家正在接单'
          }}</van-step>
          <van-step>{{
            orderInfo.status == 92 ? '已退款' : '已出餐'
          }}</van-step>
        </van-steps>
      </view>

      <view class="priceTitle" v-if="orderInfo.status == 92">
        <text
          >系统已将退款资金交给客服处理，通常情况
          下，退款会原路退回至您的支付账户，余额会在20分钟内到账，银行卡会在1-3个工作日内到账</text
        >
      </view>
      <view class="address">
        <text> 收餐手机号：</text> <text>{{ hwInfo.phoneNumber }}</text>
      </view>
    </view>
    <view class="card" @click="showMap = true">
      <view class="address">
        <van-icon style="font-weight: 700; color: #fc6d19" name="shop-o" />
        {{ hwInfo.shopRestaurant.name }}
      </view>
      <view class="address">
        <van-icon size="32rpx" style="color: #1998fb" name="location-o" />
        <text style="font-size: 24rpx"> {{ address }}</text>
      </view>
    </view>

    <view class="orderBox">
      <view class="orderItem" :style="{ height: showBtn ? '430rpx' : 'auto' }">
        <van-card
          style="background-color: #fff"
          v-for="item in orderListInfo"
          :key="item.id"
          :num="item.count"
          :desc="item.otherCheckStr"
          :thumb="item.skuImage"
          :origin-price="item.money"
        >
          <template #title>
            <text style="font-size: 28rpx">{{ item.skuName }}</text>
          </template>
          <template #price>
            <text style="font-size: 32rpx">￥{{ item.totalMoney }}</text>
          </template>
          <template #origin-price>
            <text style="font-size: 24rpx">￥{{ item.money }}</text>
          </template>
          <template #footer>
            <view class="footerBox">
              <view class="left">
                <u-tag
                  v-if="item.status == 92 || item.refundNum > 0"
                  :text="
                    item.refundNum == item.count ? '已全部退款' : '已部分退款'
                  "
                  mode="dark"
                  type="error"
                />
              </view>
              <view class="redColor" v-if="item.scoreMoney > 0"
                ><u-tag
                  :text="enumAll.SHOPMODEL[shopMode] + '抵扣'"
                  mode="light"
                  type="error"
                />
                -￥{{ item.scoreMoney }}</view
              >
            </view>

            <view
              class="refundMoneyTips"
              v-if="item.status == 92 || item.refundNum > 0"
            >
              退款数量:x{{ item.refundNum }}，退款金额:{{
                item.refundMoney
              }}，退{{ enumAll.SHOPMODEL[shopMode] }}:{{
                item.refundScoreMoney
              }}
            </view>

            <view
              class="priceTips"
              v-if="item.status == 92 || item.refundNum > 0"
              >系统已将退款资金交给客服处理，通常情况
              下，退款会原路退回至您的支付账户，余额会在20分钟内到账，银行卡会在1-3个工作日内到账</view
            >
          </template>
        </van-card>
      </view>

      <view style="margin-top: 20rpx">
        <u-button
          v-if="orderListInfo.length > 2"
          @click="showBtn = !showBtn"
          class="btn"
          type="info"
          shape="circle"
        >
          <!-- 展开 -->
          <u-icon v-if="!showBtn" name="arrow-down"></u-icon>
          <!-- 收起 -->
          <u-icon v-else name="arrow-up"></u-icon>
        </u-button>
      </view>
      <view class="total flexSpaceBetween" v-if="orderInfo.scoreMoney > 0">
        <text>{{ enumAll.SHOPMODEL[shopMode] }}优惠减免合计</text>
        <text class="redColor">-￥{{ orderInfo.scoreMoney }}</text>
      </view>
      <view
        v-if="shopMode == 4 || shopMode == 6"
        class="total flexSpaceBetween"
      >
        <text>服务费</text>
        <text>￥{{ orderInfo.otherMoney }}</text>
      </view>
      <view class="total flexSpaceBetween">
        <text>共计{{ orderListInfo.length }}件</text>
        <text>实付￥{{ total }}</text>
      </view>

      <view
        v-if="hwInfo.orderStatus == 'FAIL' && orderInfo.status == 20"
        class="total flexSpaceBetween"
      >
        <text>发起退款</text>
        <text
          ><van-button hairline size="small" type="danger" @click="debouncedHandleRefund"
            >立即退款</van-button
          ></text
        >
      </view>
      <view
        v-if="hwInfo.orderStatus == 'FAIL' && orderInfo.status == 20"
        class="total flexSpaceBetween"
      >
        <text>系统会在1-2天内提交客服支付处理</text>
      </view>
      <!-- <view class="total flexSpaceBetween" v-if="orderInfo.status == 10">
        <text>支付</text>
        <view>
          <u-button
            style="width: 100rpx"
            type="primary"
            size="medium"
            @click="onsubmit"
            >立即付款</u-button
          >
        </view>
      </view> -->
      <view class="total flexSpaceBetween" v-if="orderInfo.status == 91">
        <!-- <view class="total flexSpaceBetween" v-if="orderInfo.status == 10"> -->
        <text>订单状态</text>
        <view style="color: #969696"> 订单已经取消过期 </view>
      </view>
      <view class="orderNo">
        <view
          >下单时间:
          <text>{{ formatDateTime(orderInfo.createTime * 1000) }}</text></view
        >
        <view class="flexSpaceBetween" style="margin: 10rpx 0">
          <view
            >订单编号:<text>{{ orderInfo.orderNo }}</text></view
          >
          <view>
            <van-button
              plain
              hairline
              size="small"
              type="default"
              @click="handleCopy"
              >复制</van-button
            >
            <!-- <van-button type="primary" size="small" @click="handleCopy">复制</van-button> -->
            <!-- <u-button style="width: 100rpx;" @click="handleCopy" type="info">复制</u-button> -->
          </view>
        </view>
        <!-- <view>三方订单编号:<text>231531</text></view> -->
      </view>
    </view>
    <!-- 地图弹出框 -->
    <van-popup
      v-model:show="showMap"
      round
      position="bottom"
      :style="{ height: '20%' }"
    >
      <view class="map">
        <van-button class="btn" @click="openGMap" type="default"
          >高德地图</van-button
        >
        <van-button class="btn" @click="openBMap" type="default"
          >百度地图</van-button
        >
        <van-button class="btn" @click="openTMap" type="default"
          >腾讯地图</van-button
        >
        <van-button class="btn" @click="copyMap" type="default"
          >复制地址</van-button
        >
        <van-button class="btn btn2" type="default" @click="showMap = false"
          >取消</van-button
        >
      </view>
    </van-popup>
  </view>

  <view v-else-if="pageStatus === 'loading'" class="loading-container">
    <view class="mask"></view>
    <van-loading size="48px" vertical>加载中... </van-loading>
  </view>

  <view v-else-if="pageStatus === 'empty'" class="error-message">
    <van-empty
      image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
      description="还没有订单信息，快去下单"
    />
    <view>
      <u-button
        @click="onClickRight"
        type="error"
        size="mini"
        style="margin-top: 20rpx"
        >刷新</u-button
      >
      <u-button
        @click="goHome"
        type="primary"
        size="mini"
        style="margin-top: 20rpx; margin-left: 20rpx"
        >返回首页</u-button
      >
    </view>
  </view>

  <view v-else class="error-message">
    <van-empty image="error" description="加载失败，请点击重试" />
    <view>
      <u-button
        @click="onClickRight"
        type="error"
        size="mini"
        style="margin-top: 20rpx"
        >刷新</u-button
      >
      <u-button
        @click="goHome"
        type="primary"
        size="mini"
        style="margin-top: 20rpx; margin-left: 20rpx"
        >返回首页</u-button
      >
    </view>
  </view>
</template>

<script setup lang="ts">
import {
  onReady,
  onShow,
  onLoad,
  onReachBottom,
  onPageScroll,
  onShareAppMessage,
  onPullDownRefresh
} from '@dcloudio/uni-app'
import { nextTick, reactive, ref, watch } from 'vue'
import { enumAll, orderApi, moneyApi } from '@/api'
import { route } from '@/utils/common'
import { storeToRefs } from 'pinia'
//工具
import { formatDate, formatDateTime } from '@/utils/format'
import { moneyUtils } from '@/utils/money'
import {
  useGoodStore,
  useUserStore,
  useCartStore,
  useShopInfoStore,
  useGoodsDetailStore
} from '@/store'
import { browserVersion } from '@/utils/common'
import qrcode from '@/components/hy-qrcode'
import debounce from 'lodash/debounce'

//初始数据
// 新增响应式数据
const currentQrIndex = ref(0)
const isApp = ref(false)
const shopMode = ref(uni.getStorageSync('shopMode'))
const userStore = useUserStore()
const goodStore = useGoodStore()
const shopStore = useShopInfoStore()
const goodDetailStore = useGoodsDetailStore()
const carStore = useCartStore()
const shopInfoStore = useShopInfoStore()
const { accessToken, useShareCode } = storeToRefs(userStore)
const active = ref(1) //0-2
const activeIcon = ref('success') //0-2
const showBtn = ref(false)
const orderPayList = ref<any>([])
const orderId = ref('')
const address = ref('')
const orderInfo = ref<any>({})
const orderListInfo = ref<any>([])
const total = ref(0)
const hwInfo = ref<any>({})
const loading = ref(true) // 新增 loading 状态
const showError = ref(false)
const showNone = ref(false)
const ticketCodes = ref<any>([])
const showMap = ref(false) //地图展示

const shopInfo = ref()
const locationObj = ref<any>({})
const locationEndObj = ref<any>({})
// 定义页面状态枚举
type PageStatus = 'loading' | 'error' | 'empty' | 'success'
const pageStatus = ref<PageStatus>('loading') // 初始为 loading
// #region ************* 商品 *****************/

//合计
watch(
  () => orderInfo.value,
  (newValue) => {
    if (newValue) {
      const totalMoney = newValue.totalMoney
      const scoreMoney = newValue.scoreMoney
      total.value = moneyUtils.deductWithScore(totalMoney, scoreMoney) // 得到 0.79
    }
  }
)

function safeParse(jsonString: string | undefined): any {
  if (!jsonString) return []
  try {
    return JSON.parse(jsonString)
  } catch (e) {
    console.warn('JSON 解析失败:', jsonString)
    return []
  }
}

const codeName = () => {
  if (hwInfo.value.codes) {
    return JSON.parse(hwInfo.value.codes)
  } else if (hwInfo.value.code) {
    let strArr = hwInfo.value.code.split(',')

    return strArr
  }
  // safeParse(hwInfo.codes).join(',')
}

// #region ************* 订单 *****************/

//订单列表
const orderList = async () => {
  const { data } = await orderApi.orderList({
    pageIndex: 1,
    detail: true,
    statuses: 20, //已支付待取餐
    otherColumns: 'user'
  })
  if (data.records && data.records.length > 0) {
    orderPayList.value = data.records.filter((item: any) => {
      return item.shopBrandId
    })

    orderId.value = orderPayList.value[0].id
    orderDetail()
  } else {
    uni.showToast({
      title: '暂无订单',
      icon: 'none'
    })
  }
}

 
//获取订单详细信息
const orderDetail = async () => {
  try {
    pageStatus.value = 'loading'
    const { data, code } = await orderApi.getHwOrderInfoLatest()
    if (code === 200) {
      shopMode.value = data.shopMode

      // 判断是否有 orderProductSkus（订单商品）
      if (data.hasOwnProperty('orderProductSkus')) {
        orderInfo.value = data

        orderListInfo.value = data.orderProductSkus

        // ✅ 关键修改：判断是否存在 orderThirdParty
        if (data.hasOwnProperty('orderThirdParty') && data.orderThirdParty) {
          hwInfo.value = data.orderThirdParty

          switch (data.orderThirdParty.orderStatus) {
            case 'OUT_MEAL':
              active.value = 2
              activeIcon.value = 'success'
              break
            case 'OUT_MEAL_PART':
              active.value = 2
              activeIcon.value = 'success'
              break
            case 'FAIL':
              orderInfo.value.status == 92
                ? (active.value = 2)
                : (active.value = 1)
              orderInfo.value.status == 92
                ? (activeIcon.value = 'success')
                : (activeIcon.value = 'cross')

              break
            case 'WAIT_OUT_MEAL':
              active.value = 1
              activeIcon.value = 'underway-o'
              break
            case 'CREATE_ORDER':
              active.value = 0
              activeIcon.value = 'underway-o'
              break

            default:
              active.value = 1
              activeIcon.value = 'success'
              break
          }

          let adr = data.orderThirdParty.shopRestaurant
          locationEndObj.value = {
            latEnd: adr.latitude,
            lotEnd: adr.longitude
          }
          address.value = `${adr?.provinceName}${adr?.cityName}${adr?.address}`
        } else {
          // 没有 orderThirdParty 时也允许显示页面部分信息
          hwInfo.value = {}
          // 可选：设置默认状态或隐藏取餐号等模块
        }

        pageStatus.value = 'success'
      } else {
        pageStatus.value = 'empty'
      }
    } else {
      pageStatus.value = 'error'
    }
  } catch (err) {
    console.error('请求失败:', err)
    pageStatus.value = 'error'
  }
}

//从订单进入的
const byOrderId = async () => {
  pageStatus.value = 'loading'
  const timeoutPromise = new Promise((_, reject) =>
    setTimeout(() => reject('请求超时'), 8000)
  )
  try {
    const result = await Promise.race([
      await orderApi.orderInfo({
        detail: true,
        id: orderId.value
      }),
      timeoutPromise
    ])
    const { data, code } = result as any

    if (code === 200) {
      shopMode.value = data.shopMode
      // 判断是否有 orderProductSkus（订单商品）
      if (data.hasOwnProperty('orderProductSkus')) {
        orderInfo.value = data

        orderListInfo.value = data.orderProductSkus

        // ✅ 关键修改：判断是否存在 orderThirdParty
        if (data.hasOwnProperty('orderThirdParty') && data.orderThirdParty) {
          hwInfo.value = data.orderThirdParty
          switch (data.orderThirdParty.orderStatus) {
            case 'OUT_MEAL':
              active.value = 2
              activeIcon.value = 'success'
              break
            case 'OUT_MEAL_PART':
              active.value = 2
              activeIcon.value = 'success'
              break
            case 'FAIL':
              orderInfo.value.status == 92
                ? (active.value = 2)
                : (active.value = 1)
              orderInfo.value.status == 92
                ? (activeIcon.value = 'success')
                : (activeIcon.value = 'cross')

              break
            case 'WAIT_OUT_MEAL':
              active.value = 1
              activeIcon.value = 'underway-o'
              break
            case 'CREATE_ORDER':
              active.value = 0
              activeIcon.value = 'underway-o'
              break

            default:
              active.value = 1
              activeIcon.value = 'success'
              break
          }
          if (data.orderThirdParty.qrCodes) {
            // 处理取票二维码
            switch (data.shopBrandId) {
              // 瑞幸
              case 13:
                ticketCodes.value = JSON.parse(data.orderThirdParty.qrCodes)
                break

              default:
                break
            }
          }

          let adr = data.orderThirdParty.shopRestaurant
          locationEndObj.value = {
            latEnd: adr.latitude,
            lotEnd: adr.longitude
          }
          address.value = `${adr?.provinceName}${adr?.cityName}${adr?.address}`
        } else {
          // 没有 orderThirdParty 时也允许显示页面部分信息
          hwInfo.value = {}
          // 可选：设置默认状态或隐藏取餐号等模块
        }

        pageStatus.value = 'success'
      } else {
        pageStatus.value = 'empty'
      }
    } else {
      pageStatus.value = 'error'
    }
  } catch (err) {
    console.error('请求失败:', err)
    pageStatus.value = 'error'
  }
}
//#endregion

// #region ***************** 支付 *************************/

const onsubmit = () => {
  // 调用防抖函数
  debouncedCreatOrder()
}

//创建订单
const creatOrder = async () => {
  //付款准备

  if (orderInfo && orderInfo.value.id) {
    if (isApp.value) {
      const u = browserVersion()
      if (u.iPhone) {
        // @ts-ignore
        window.JSBridge.invoke('goPay', {
          orderId: orderInfo.value.id,
          money: orderInfo.value.payMoney
        })
        shopStore.setIsApp(false)
        return
      } else if (u.isAndroid) {
        // @ts-ignore
        if (window?.Android) {
          // @ts-ignore
          window?.Android?.goPay(orderInfo.value.id, orderInfo.value.payMoney)
          shopStore.setIsApp(false)
        }
        return
      }
    } else {
      location.href = `https://api.mylkjgs.com/?token=${accessToken.value}&orderId=${orderInfo.value.id}`
      // uni.navigateTo({ url: `/pages/bigLife/payPage?orderId=${data.id}`})
    }
  }
}

// 创建防抖版本的 creatOrder 函数，500 毫秒内只执行一次
const debouncedCreatOrder = debounce(creatOrder, 500)

// 退款
const handleRefund = async () => {
  // id,,status:92,
  const { code } = await orderApi.orderUpdate({
    id: orderInfo.value.id,
    status: 92
  })
  if (code == 200) {
    uni.showToast({
      title: '退款成功'
    })
    //刷新
    orderDetail()
  } else {
    uni.showToast({
      icon: 'error',
      title: '退款失败,请联系客服' + code
    })
  }
}

const debouncedHandleRefund = debounce(handleRefund, 5000)

// #endregion

// #region ***************** 地图唤起 *************************/
//高德
const openGMap = () => {
  const { latitude, longitude } = locationObj.value
  const { latEnd, lotEnd } = locationEndObj.value
  window.location.href = `https://uri.amap.com/marker?position=${lotEnd},${latEnd}&name=${hwInfo.value.shopRestaurant.name}&coordinate=gaode&callnative=0`
}

//百度
const openBMap = () => {
  const { latitude, longitude } = locationObj.value
  const { latEnd, lotEnd } = locationEndObj.value
  window.location.href = `https://api.map.baidu.com/marker?location=${latEnd},${lotEnd}&title=${shopInfo.value.name}&output=html`
}

//腾讯
const openTMap = () => {
  const { latitude, longitude } = locationObj.value
  const { latEnd, lotEnd } = locationEndObj.value
  window.location.href = `https://apis.map.qq.com/uri/v1/marker?marker=coord:${latEnd},${lotEnd};title=${shopInfo.value.name}`
}

const copyMap = () => {
  uni.setClipboardData({
    data: address.value,
    success: () => {
      showMap.value = false
      uni.showToast({
        title: '复制成功'
      })
    },
    fail: () => {
      showMap.value = false
      uni.showToast({
        title: '复制失败',
        icon: 'none'
      })
    }
  })
}
// #endregion

//  #region ***************** 处理轮播图 *************************/

// 轮播图切换事件
const onQrSwiperChange = (e: any) => {
  currentQrIndex.value = e.detail.current
}

// 上一张二维码
const prevQr = () => {
  if (currentQrIndex.value > 0) {
    currentQrIndex.value--
  }
}

// 下一张二维码
const nextQr = () => {
  if (currentQrIndex.value < ticketCodes.value.length - 1) {
    currentQrIndex.value++
  }
}

// #endregion

//刷新
const onClickRight = () => {
  orderDetail() // 重新请求接口
}

//返回首页
const goHome = () => {
  if (shopStore.isApp) {
    //直接关掉浏览器
    window.close()
  } else {
    uni.switchTab({
      url: '/pages/index/index'
    })
  }
}

const handleCopy = () => {
  const orderNo = orderInfo.value.orderNo
  if (orderNo) {
    uni.setClipboardData({
      data: orderNo,
      success: () => {
        uni.showToast({ title: '复制成功' })
      },
      fail: () => {
        uni.showToast({ title: '复制失败', icon: 'none' })
      }
    })
  } else {
    uni.showToast({ title: '订单编号为空', icon: 'none' })
  }
}

onLoad((option: any) => {
  shopInfo.value = shopInfoStore.shopInfo
  locationObj.value = uni.getStorageSync('wzLocation') //当前自己的定位
  if (option?.orderId) {
    orderId.value = option?.orderId
    if (option?.from && option.from.toLowerCase() === 'app') {
      isApp.value = true
      // #ifdef H5
      // @ts-ignore
      window.JSBridge.registerEvent('HYUserEvent', async () => {
        byOrderId()
      })
      // #endif
    } else {
      byOrderId()
    }
  } else {
    if (option?.from && option.from.toLowerCase() === 'app') {
      isApp.value = true
      // #ifdef H5
      // @ts-ignore
      window.JSBridge.registerEvent('HYUserEvent', async () => {
        orderDetail()
      })
      // #endif
    } else {
      orderDetail()
    }
  }
})
</script>

<style lang="scss" scoped>
.pickUp {
  padding: 20rpx;

  .nav {
    background-color: #f6f6f6;
  }

  .pickUpNumber {
    margin-bottom: 20rpx;

    .NumberWord {
      margin-bottom: 20rpx;
      text-align: center;

      .Number {
        // width: ;
        margin: 20rpx 0;
        font-size: 48rpx;
        font-weight: 700;
        display: flex;
        flex-wrap: wrap;
        // flex-direction: ;
        justify-content: center;
        align-items: center;

        .NumberText {
          padding: 10rpx;
        }
      }

      .Number2 {
        margin: 20rpx 0;
        font-size: 48rpx;
        font-weight: 700;
        display: flex;
        flex-wrap: wrap;
        // flex-direction: ;
        justify-content: center;
        align-items: center;

        .NumberText {
          padding: 10rpx;
        }
      }
    }

    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #8fa2fb;
      // font-size: 42rpx;
      font-weight: 700;
    }
  }

  .orderBox {
    margin: 20rpx 0;
    border-radius: 20rpx;
    background: #fff;

    .orderItem {
      // height: 400rpx;
      overflow: hidden;
      // overflow-y: scroll;

      padding: 20rpx 0;

      .footerBox {
        margin-left: 180rpx;
        margin-top: 20rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 700;
        font-size: 28rpx;
      }
      .refundMoney {
        margin: 20rpx 0;
        padding: 10rpx 0;

        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 28rpx;
        font-weight: 700;
        border-bottom: 2rpx solid #efefef;
      }
      .refundMoneyTips {
        margin: 20rpx 0;
        text-align: left;
        font-size: 26rpx;
        color: #f56d6d;
        // color: #333;
      }
      .priceTips {
        text-align: left;
        font-size: 20rpx;
        color: #969696;
      }
    }

    .total {
      margin: 10rpx 0;
      padding: 20rpx;
      font-weight: 700;
      border-bottom: 2rpx solid #efefef;
    }

    .orderNo {
      padding: 20rpx;
      font-size: 24rpx;
      color: #969696;
    }
  }
}

.btn {
  width: 100rpx;
  height: 50rpx;
  background-color: #fff;
  color: #333;
}

.card {
  // width: 100%;
  padding: 20rpx;
  border-radius: 20rpx;
  background-color: #fff;
  margin: 20rpx 0;
}

.flexSpaceBetween {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.redColor {
  color: #f4403b;
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
}

.error-message {
  text-align: center;
  padding: 40rpx;
  color: red;
}

.loading-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  /* 确保在最上层 */
}

.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.6);
  /* 白色半透明遮罩 */
  z-index: 9998;
  /* 让遮罩在背景上、加载图标下 */
}

.priceTitle {
  font-size: 20rpx;
  color: #969696;
}

.address {
  margin: 20rpx 0;
}

.map {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f7f8fa;

  .btn {
    width: 100%;
    height: 80rpx;
    border: none;
    background-color: #fff;
  }

  .btn2 {
    margin-top: 20rpx;
  }
}

// .qrcode {
//   margin: 20rpx 0;
//   display: flex;
//   justify-content: center;
//   align-items: center;
// }

.qrcode {
  margin: 20rpx 0;

  .qrcode-swiper-container {
    display: flex;
    // flex-direction: column;
    justify-content: space-between;
    align-items: center;

    .qrcode-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;

      .qrcode-label {
        margin-top: 20rpx;
        font-size: 28rpx;
        color: #666;
      }
    }

    .qrcode-nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      margin-top: 20rpx;

      .qrcode-counter {
        font-size: 28rpx;
        color: #666;
      }
    }
  }
}

:deep(.van-card__footer .footerBox) {
  margin-left: 0 !important;
}
</style>
